<template>
  <div class="table-title">
    <span>{{ dataType.title }}</span>
    <div class="flex">
      <li>
        <el-select v-model="gradeVal" size="small" filterable placeholder="班级" clearable @change="changeGrade">
          <el-option
            v-for="item in gradeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </li>
      <li>
        <el-select v-model="teacherVal" size="small" filterable placeholder="老师" clearable @change="changeTeacher">
          <el-option
            v-for="item in teacherList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li>
      <li>
        <el-select v-model="courseVal" size="small" filterable placeholder="课程" clearable @change="changeCourse">
          <el-option
            v-for="item in courseList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </li>
    </div>

    <div class="btn-tag">
      <el-button-group>
        <el-button type="primary" size="small" :class="{ 'button-active': btnIndex == 1 }" @click="selectBtn(1)">今日</el-button>
        <el-button type="primary" size="small" :class="{ 'button-active': btnIndex == 2 }" @click="selectBtn(2)">昨日</el-button>
        <el-button type="primary" size="small" :class="{ 'button-active': btnIndex == 3 }" @click="selectBtn(3)">本周</el-button>
        <el-button type="primary" size="small" :class="{ 'button-active': btnIndex == 4 }" @click="selectBtn(4)">本月</el-button>
      </el-button-group>
    </div>

    <div class="picker-box">
      <el-date-picker
        v-model="dateVal"
        type="daterange"
        value-format="yyyy-MM-dd"
        size="small"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleChangeDate">
      </el-date-picker>
    </div>

    <div class="btn-tag">
      <el-button-group>
        <el-button type="primary" size="small" :class="{ 'button-active': formIndex == 1 }" @click="formCut(1)">图表</el-button>
        <el-button type="primary" size="small" :class="{ 'button-active': formIndex == 2 }" @click="formCut(2)">表格</el-button>
      </el-button-group>
    </div>

    <el-button type="primary" plain size="small" @click="exportTableData(dataType.type)">导出表格</el-button>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "TableTitleModel",
  components: {},
  data() {
    return {
      btnIndex: 1,
      formIndex: 1,
      dateVal: [],
      courseVal: "",
      teacherList: [{
        value: '1',
        label: '老师一'
      }, {
        value: '2',
        label: '老师二'
      }],
      teacherVal: '',
      gradeVal: ''
    }
  },
  props: {
    dataType: {
      type: Object
    }
  },
  computed: {
    ...mapState(["courseList", "gradeList"])
  },

  mounted() {

  },

  methods: {
    // 选择器
    changeGrade() {
      console.log(this.gradeVal);
    },

    changeTeacher() {
      console.log(this.teacherVal);
    },

    changeCourse() {
      console.log(this.courseVal);
    },


    // 快捷时间选择
    selectBtn(num) {
      this.btnIndex = num;
    },

    // 日期选择
    handleChangeDate() {
      console.log(this.dateVal);
    },

    // 图表/表格切换
    formCut(num) {
      this.formIndex = num;
      this.$parent.cutDataType(this.dataType.type, num);
    },

    // 导出表格
    exportTableData(type) {
      console.log(type);
    }
  }
}
</script>

<style scoped lang="scss">
  @import '../styles/variable';

  .table-title{
    padding: 0 20px;

    .flex{
      li{
        width: 90px;
        margin-right: 10px;
      }

      li:last-child{
        margin-right: 0;
      }

      li:first-child{
        margin-left: 24px;
      }
    }

    .picker-box{
      width: 240px;

      .el-date-editor--daterange{
        width: 240px;
      }
    }
  }

  .btn-tag{
    .el-button-group{
      .el-button--primary{
        background: #ffffff;
        border-color: #DFE0E1;
        color: #666666;
        padding: 9px 12px;

        &:hover,
        &:focus,
        &.button-active{
          background: #ebf0ff;
          border-color: $default-color;
          color: $default-color;
        }

        &.button-active {
          margin-right: 0;
        }
      }
    }
  }
</style>

<style scoped>
  .picker-box >>> .el-date-editor .el-range-separator{
    width: auto;
  }
</style>
